//  获取元素
const welcome = document.querySelector(".site-nav-login");
const loginBtn = document.querySelector(".login");

let pageNum = 0

// 根据登录状态显示当前账号昵称
if (localStorage.login !== undefined) {
  // 到这里说明账号已经登录
  welcome.innerHTML = `欢迎您,   ${localStorage.name} <a id="quit">[退出]</a>
  `;

  // 给 退出登录 添加 点击事件
  const logoutBtn = document.querySelector("#quit");

  logoutBtn.addEventListener("click", function () {
    if (window.localStorage.login === undefined) {
      if (confirm("您还没有登录,是否跳转到登录页面?")) {
        window.location.href = `./login.html?url=${window.location.href}`;
      }
    } else {
      window.localStorage.removeItem("login");
      localStorage.removeItem("name");
      welcome.innerHTML = `
    <a href="javascript:;" class="login">登录</a>
    <span>|</span>
    <a href="./register.html">注册</a>
    `;
      const loginBtn = document.querySelector(".login");
      // 点击登录跳转登录页面并带参数过去
      loginBtn.addEventListener("click", function () {
        window.location.href = `./login.html?url=${window.location.href}`;
      });
    }
  });
}

// 点击登录跳转登录页面并带参数过去
loginBtn.addEventListener("click", function () {
  window.location.href = `./login.html?url=${window.location.href}`;
});



// 给购物车按钮 添加点击事件
const myCart = document.querySelector(".myCart");

myCart.addEventListener("click", function () {
  // 如果localStorage里没有login说明没有登录,无法跳转购物车页面
  if (localStorage.login === undefined) {
    // 询问是否跳转登录页
    if (confirm("你还没有登录,点击确定跳转到登录页")) {
      window.location.href = `./login.html?url=${location.href}`;
    }
  } else {
    location.href = "./cart.html";
  }
});



// ?sa=pc
// nav 下拉渲染
const categoryList = document.querySelector(".category-list");
getNav();
async function getNav() {
  const res = await pAjax({
    url: "/nav?sa=pc",
    dataType: "json",
  });
  // console.log(res);
  let navStr = "";
  // 第一层菜单渲染
  res.data.forEach(function (item) {
    navStr += `
    <li class="category-item " name="ulli">
      <span class="icon icon-1"></span>
      <span class="name">${item.top.topName}</span>
      <div class="subcate-box ">
      `;
    // 第二层菜单渲染
    for (let i = 0; i < item.top.category.length; i++) {
      navStr += `
        <dl class="subcate-item">
          <dt>
            <a href="./list.html?cateid=${item.top.category[i].cateId}">${item.top.category[i].cateName}</a>
          </dt>
          <dd class="subcate-list">`;
      // 第三层菜单渲染
      for (k = 0; k < item.top.category[i].subCategory.length; k++) {
        navStr += `
            <a href="./list.html?cateid=${item.top.category[i].cateId}&subid=${item.top.category[i].subCategory[k].subId}">${item.top.category[i].subCategory[k].subName}</a>
            `;
      }
      navStr += `

          </dd>
        </dl>
        `;
    }
    navStr += `
      </div>
    </li>
    `;
  });
  categoryList.innerHTML = navStr;
}

// nav 选项卡

categoryList.addEventListener("mouseover", function (e) {
  if (e.target.getAttribute("name") === "ulli") {
    // 清除所有li的class.active
    const ulLi = document.querySelectorAll(".category-item");
    const olLi = document.querySelectorAll(".subcate-box");
    // console.log(olLi);
    const box = e.target.children;

    ulLi.forEach(function (item) {
      item.classList.remove("active");
    });

    e.target.classList.add("active");

    olLi.forEach(function (item) {
      item.classList.remove("active");
    });

    box[2].classList.add("active");
  }
});
// 离开二级菜单的时候 三级框消失
categoryList.addEventListener("mouseleave", function () {
  const ulLi = document.querySelectorAll(".category-item");
  const olLi = document.querySelectorAll(".subcate-box");

  ulLi.forEach(function (item) {
    item.classList.remove("active");
  });

  olLi.forEach(function (item) {
    item.classList.remove("active");
  });
});
